<template>
  <up-sticky>
    <view class="global-search">
      <view class="search-nav">
        <up-search placeholder="搜索作者或产品名" bgColor="transparent" v-model="keyword"></up-search>
      </view>
    </view>
    <view class="global-tab">
      <tabs-list :list="searchList" @change="onChange"></tabs-list>
    </view>
  </up-sticky>
  <view class="global-nav">

  </view>
</template>

<script setup>
  import {
    ref
  } from 'vue'
  const keyword = ref('')
  const searchList = ref([{
      name: '作者'
    },
    {
      name: '产品'
    }
  ])

  function onChange(e) {
  }
</script>

<style lang="less" scoped>
  uni-page-body {
    display: flex;
    flex-direction: column;
  }

  .global-search {
    height: 96rpx;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 32rpx;
    justify-content: center;
    .search-nav {
      display: flex;
      align-items: center;
      width: 90vw;
      height: 72rpx;
      border-radius: 36rpx;
      background: rgba(242, 242, 242, 1);

    }

    /deep/ .u-search__action--active {
      width: 128rpx;
      border-radius: 32rpx;
      background: rgba(255, 65, 108, 1);
      font-size: 28rpx;
      line-height: 64rpx;
      color: rgba(255, 255, 255, 1);
      text-align: center;

    }
  }

  .global-tab {
    width: 100%;
    height: 88rpx;
    background: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    padding: 0 20rpx;
  }

  .global-nav {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 32rpx 24rpx;
  }
</style>